<template>
  <div class="profile-page content-container">
    <!-- 顶部用户信息卡片 -->
    <div class="user-card">
      <div class="user-card-container">
        <div class="user-avatar-large">
          <img v-img-error :src="userInfo.avatar" alt="用户头像" class="avatar-img">
          <div v-if="userInfo.vip" class="vip-badge">
            <i class="vip-icon">⭐</i>
            <span class="vip-text">大会员</span>
          </div>
        </div>
        <div class="user-info-main">
          <div class="user-basic-info">
            <h1 class="user-nickname">{{ editForm.nickname }}</h1>
            <span class="user-username">{{ editForm.username }}</span>
            <div v-if="userInfo.level" class="user-level">Lv.{{ userInfo.level }}</div>
            <!-- 关注/取消关注按钮 (示例：如果不是自己的主页) -->
            <button 
              v-if="!isOwnProfile" 
              class="follow-btn" 
              :class="{ following: isFollowing }"
              @click="toggleFollow"
            >
              {{ isFollowing ? '已关注' : '关注' }}
            </button>
          </div>
          <p v-if="editForm.signature" class="user-signature">{{ editForm.signature }}</p>
          <div class="user-stats">
            <div class="stat-item" @click="showFollowingList">
              <span class="stat-value">{{ followingCount || 0 }}</span>
              <span class="stat-label">关注</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item" @click="showFollowersList">
              <span class="stat-value">{{ followersCount || 0 }}</span>
              <span class="stat-label">粉丝</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-value">{{ totalViews || 0 }}</span>
              <span class="stat-label">总播放</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-value">{{ userInfo.coins || 0 }}</span>
              <span class="stat-label">硬币</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 个人中心主体 -->
    <div class="user-center-container content-wrapper">
      <!-- 左侧导航栏 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <h3 class="sidebar-title">个人中心</h3>
        </div>
        <ul class="sidebar-menu">
          <li class="menu-item">
            <router-link to="/home" class="menu-link">
              <i class="menu-icon home-icon">🏠</i>
              <span class="menu-text">首页</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/vip" class="menu-link">
              <i class="menu-icon vip-icon">⭐</i>
              <span class="menu-text">大会员</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/points" class="menu-link">
              <i class="menu-icon points-icon">🏆</i>
              <span class="menu-text">会员积分</span>
            </router-link>
          </li>
          <li class="menu-item active">
            <router-link to="/profile?tab=info" class="menu-link">
              <i class="menu-icon info-icon">👤</i>
              <span class="menu-text">我的信息</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=avatar" class="menu-link">
              <i class="menu-icon avatar-icon">🖼️</i>
              <span class="menu-text">我的头像</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=fan-badges" class="menu-link">
              <i class="menu-icon badge-icon">🏅</i>
              <span class="menu-text">粉丝勋章</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=achievements" class="menu-link">
              <i class="menu-icon achievement-icon">🎯</i>
              <span class="menu-text">成就勋章</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=security" class="menu-link">
              <i class="menu-icon security-icon">🔒</i>
              <span class="menu-text">账号安全</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=blacklist" class="menu-link">
              <i class="menu-icon blacklist-icon">🚫</i>
              <span class="menu-text">黑名单管理</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=coins" class="menu-link">
              <i class="menu-icon coins-icon">💰</i>
              <span class="menu-text">我的硬币</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=history" class="menu-link">
              <i class="menu-icon history-icon">📋</i>
              <span class="menu-text">我的记录</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=verify" class="menu-link">
              <i class="menu-icon verify-icon">✅</i>
              <span class="menu-text">实名认证</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=invite" class="menu-link">
              <i class="menu-icon invite-icon">📧</i>
              <span class="menu-text">邀请注册</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=notifications" class="menu-link">
              <i class="menu-icon notify-icon">🔔</i>
              <span class="menu-text">通知设置</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=space" class="menu-link">
              <i class="menu-icon space-icon">🌐</i>
              <span class="menu-text">个人空间</span>
            </router-link>
          </li>
          <li class="menu-item">
            <router-link to="/profile?tab=creator" class="menu-link">
              <i class="menu-icon creator-icon">🎬</i>
              <span class="menu-text">创作者中心</span>
            </router-link>
          </li>
        </ul>
      </div>

      <!-- 右侧内容区 -->
      <div class="content-area">
        <!-- 标签页导航 -->
        <div class="content-header">
          <div class="tab-nav">
            <router-link to="/profile?tab=info" class="tab-item" :class="{ active: $route.query.tab === 'info' || !$route.query.tab }">我的信息</router-link>
            <router-link to="/profile?tab=avatar" class="tab-item" :class="{ active: $route.query.tab === 'avatar' }">我的头像</router-link>
            <router-link to="/profile?tab=security" class="tab-item" :class="{ active: $route.query.tab === 'security' }">账号安全</router-link>
            <router-link to="/profile?tab=privacy" class="tab-item" :class="{ active: $route.query.tab === 'privacy' }">隐私设置</router-link>
            <router-link to="/profile?tab=blacklist" class="tab-item" :class="{ active: $route.query.tab === 'blacklist' }">黑名单管理</router-link>
            <router-link to="/profile?tab=verify" class="tab-item" :class="{ active: $route.query.tab === 'verify' }">实名认证</router-link>
            <router-link to="/profile?tab=history" class="tab-item" :class="{ active: $route.query.tab === 'history' }">浏览历史</router-link>
            <router-link to="/profile?tab=notifications" class="tab-item" :class="{ active: $route.query.tab === 'notifications' }">通知设置</router-link>
            <router-link to="/profile?tab=theme" class="tab-item" :class="{ active: $route.query.tab === 'theme' }">主题设置</router-link>
            <router-link to="/profile?tab=timeline" class="tab-item" :class="{ active: $route.query.tab === 'timeline' }">活动时间线</router-link>
            <router-link to="/profile?tab=creator" class="tab-item" :class="{ active: $route.query.tab === 'creator' }">创作者中心</router-link>
          </div>
        </div>

        <!-- 内容区域 - 根据路由参数显示不同内容 -->
        <div class="form-container">
          <!-- 我的信息页面 -->
          <div v-if="$route.query.tab === 'info' || !$route.query.tab" class="info-tab-content">
          <form @submit.prevent="saveProfileChanges">
            <div class="form-section">
              <!-- 头像上传区域 -->
              <div class="form-row avatar-row">
                <label class="form-label">头像：</label>
                <div class="avatar-upload-container">
                  <div class="avatar-preview">
                    <img v-img-error :src="userInfo.avatar" alt="用户头像" class="current-avatar">
                    <div class="avatar-upload-overlay" @click="triggerAvatarUpload">
                      <i class="upload-icon">📷</i>
                      <span class="upload-text">更换头像</span>
                    </div>
                  </div>
                  <input 
                    ref="avatarInput" 
                    type="file" 
                    accept="image/*" 
                    style="display: none;" 
                    @change="handleAvatarChange"
                  >
                  <p class="avatar-hint">支持JPG、PNG、GIF、WebP格式，文件大小不超过5MB</p>
                  
                  <!-- 新增：查看历史头像按钮 -->
                  <button 
                    v-if="avatarHistory && avatarHistory.length > 0" 
                    class="history-avatar-btn"
                    @click="openAvatarHistoryModal"
                  >
                    查看历史头像
                  </button>
                </div>
              </div>

              <div class="form-row">
                <label class="form-label">昵称：</label>
                <input 
                  v-model="editForm.nickname" 
                  type="text" 
                  class="form-input"
                  placeholder="请输入昵称"
                  maxlength="20"
                >
                <span class="form-hint">注：修改一次昵称需要消耗6个硬币</span>
              </div>

              <div class="form-row">
                <label class="form-label">用户名：</label>
                <input 
                  v-model="editForm.username" 
                  type="text" 
                  class="form-input readonly"
                  readonly
                >
              </div>

              <div class="form-row">
                <label class="form-label">我的签名：</label>
                <textarea 
                  v-model="editForm.signature" 
                  class="form-textarea"
                  placeholder="设置您的签名~(～￣▽￣)～"
                  maxlength="50"
                ></textarea>
              </div>

              <div class="form-row">
                <label class="form-label">性别：</label>
                <div class="gender-options">
                  <label class="gender-option">
                    <input 
                      v-model="editForm.gender" 
                      type="radio" 
                      value="male"
                    >
                    <span class="gender-text">男</span>
                  </label>
                  <label class="gender-option">
                    <input 
                      v-model="editForm.gender" 
                      type="radio" 
                      value="female"
                    >
                    <span class="gender-text">女</span>
                  </label>
                  <label class="gender-option selected">
                    <input 
                      v-model="editForm.gender" 
                      type="radio" 
                      value="secret"
                    >
                    <span class="gender-text">保密</span>
                  </label>
                </div>
              </div>

              <div class="form-row">
                <label class="form-label">出生日期：</label>
                <input 
                  v-model="editForm.birthday" 
                  type="date" 
                  class="form-input"
                >
              </div>

              <div class="form-row">
                <label class="form-label">学校信息：</label>
                <div class="school-info">
                  <p class="school-hint">学校信息当前仅支持在App中进行编辑（需升级至6.34及以上版本）</p>
                </div>
              </div>
            </div>
          
          <div class="form-actions">
            <button type="submit" class="save-button">保存</button>
          </div>
        </form>
      </div>
      
      <!-- 我的头像页面 -->
      <div v-else-if="$route.query.tab === 'avatar'" class="tab-content">
        <div class="avatar-management">
          <h3>头像管理</h3>
          <div class="avatar-display">
            <img v-img-error :src="userInfo.avatar" alt="当前头像" class="large-avatar">
          </div>
          <div class="avatar-actions">
            <button class="avatar-upload-btn" @click="triggerAvatarUpload">上传新头像</button>
            <input 
              ref="avatarInput" 
              type="file" 
              accept="image/*" 
              style="display: none;" 
              @change="handleAvatarChange"
            >
            <button v-if="avatarHistory && avatarHistory.length > 0" class="avatar-history-btn" @click="openAvatarHistoryModal">查看历史头像</button>
          </div>
          <div class="avatar-rules">
            <p>• 支持JPG、PNG、GIF、WebP格式</p>
            <p>• 文件大小不超过5MB</p>
            <p>• 建议尺寸：200x200像素</p>
          </div>
        </div>
      </div>
      
      <!-- 粉丝勋章页面 -->
      <div v-else-if="$route.query.tab === 'fan-badges'" class="tab-content">
        <div class="badges-management">
          <h3>我的粉丝勋章</h3>
          <div class="badges-list">
            <div class="badge-item">
              <div class="badge-icon">🏅</div>
              <div class="badge-info">
                <div class="badge-name">官方认证</div>
                <div class="badge-level">Lv.5</div>
                <div class="badge-desc">官方认证用户专属勋章</div>
              </div>
            </div>
            <div class="badge-item">
              <div class="badge-icon">🎮</div>
              <div class="badge-info">
                <div class="badge-name">游戏达人</div>
                <div class="badge-level">Lv.3</div>
                <div class="badge-desc">游戏区活跃用户</div>
              </div>
            </div>
            <div class="badge-item">
              <div class="badge-icon">🎵</div>
              <div class="badge-info">
                <div class="badge-name">音乐爱好者</div>
                <div class="badge-level">Lv.2</div>
                <div class="badge-desc">音乐区活跃用户</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 成就勋章页面 -->
      <div v-else-if="$route.query.tab === 'achievements'" class="tab-content">
        <div class="achievements-management">
          <h3>我的成就</h3>
          
          <!-- 成就统计卡片 -->
          <div class="achievement-stats">
            <div class="stat-card">
              <div class="stat-number">{{ totalAchievements }}</div>
              <div class="stat-label">已解锁成就</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ totalPoints }}</div>
              <div class="stat-label">总积分</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ achievements.length - totalAchievements }}</div>
              <div class="stat-label">未解锁成就</div>
            </div>
            <div class="stat-card">
              <div class="stat-number">{{ Math.round((totalAchievements / achievements.length) * 100) }}%</div>
              <div class="stat-label">完成度</div>
            </div>
          </div>
          
          <!-- 成就分类筛选 -->
          <div class="achievement-categories">
            <button 
              v-for="category in achievementCategories" 
              :key="category"
              class="category-btn"
              :class="{ active: activeAchievementCategory === category }"
              @click="changeAchievementCategory(category)"
            >
              {{ category }}
            </button>
          </div>
          
          <!-- 成就列表 -->
          <div class="achievements-list">
            <div 
              v-for="achievement in getFilteredAchievements()" 
              :key="achievement.id"
              class="achievement-item"
              :class="{ unlocked: achievement.unlocked }"
              @click="showAchievementModal(achievement)"
            >
              <div class="achievement-icon">{{ achievement.icon }}</div>
              <div class="achievement-info">
                <div class="achievement-name">{{ achievement.name }}</div>
                <div class="achievement-description">{{ achievement.description }}</div>
                <div class="achievement-progress">
                  <div class="progress-bar">
                    <div 
                      class="progress-fill"
                      :style="{ width: (achievement.progress / achievement.maxProgress * 100) + '%' }"
                    ></div>
                  </div>
                  <div class="progress-text">{{ achievement.progress }}/{{ achievement.maxProgress }}</div>
                </div>
                <div class="achievement-meta">
                  <span class="achievement-points">{{ achievement.points }}分</span>
                  <span v-if="achievement.unlocked" class="achievement-date">
                    {{ formatDate(achievement.unlockedDate) }}解锁
                  </span>
                </div>
              </div>
              <div class="achievement-status">
                <span v-if="achievement.unlocked" class="unlocked-badge">✓</span>
                <span v-else class="locked-badge">🔒</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 成就详情模态框 -->
      <div v-if="showAchievementDetails" class="achievement-modal" @click="closeAchievementModal">
        <div class="achievement-modal-content" @click.stop>
          <div class="achievement-modal-header">
            <h3>成就详情</h3>
            <button class="achievement-modal-close" @click="closeAchievementModal">&times;</button>
          </div>
          <div v-if="selectedAchievement" class="achievement-modal-body">
            <div class="achievement-detail-icon">{{ selectedAchievement.icon }}</div>
            <h4 class="achievement-detail-name">{{ selectedAchievement.name }}</h4>
            <p class="achievement-detail-description">{{ selectedAchievement.description }}</p>
            <div class="achievement-detail-info">
              <div class="detail-item">
                <span class="detail-label">积分奖励：</span>
                <span class="detail-value">{{ selectedAchievement.points }}分</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">成就分类：</span>
                <span class="detail-value">{{ selectedAchievement.category }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">完成进度：</span>
                <span class="detail-value">{{ selectedAchievement.progress }}/{{ selectedAchievement.maxProgress }}</span>
              </div>
              <div v-if="selectedAchievement.unlocked" class="detail-item">
                <span class="detail-label">解锁时间：</span>
                <span class="detail-value">{{ formatDate(selectedAchievement.unlockedDate) }}</span>
              </div>
            </div>
            <div class="achievement-detail-progress">
              <div class="progress-bar">
                <div 
                  class="progress-fill"
                  :style="{ width: (selectedAchievement.progress / selectedAchievement.maxProgress * 100) + '%' }"
                ></div>
              </div>
            </div>
          </div>
          <div class="achievement-modal-footer">
            <button class="achievement-modal-close-btn" @click="closeAchievementModal">关闭</button>
          </div>
        </div>
      </div>
      
      <!-- 粉丝列表模态框 -->
      <div v-if="showFollowersModal" class="social-modal" @click="hideFollowersModal">
        <div class="social-modal-content" @click.stop>
          <div class="social-modal-header">
            <h3>粉丝列表 ({{ followersCount }})</h3>
            <button class="social-modal-close" @click="hideFollowersModal">&times;</button>
          </div>
          <div class="social-modal-body">
            <div v-if="followersList.length > 0" class="user-list">
              <div 
                v-for="user in followersList" 
                :key="user.id"
                class="user-list-item"
              >
                <img :src="user.avatar" alt="用户头像" class="user-list-avatar">
                <div class="user-list-info">
                  <div class="user-list-nickname">{{ user.nickname }}</div>
                </div>
                <button 
                  class="user-follow-btn"
                  :class="{ following: user.isFollowing }"
                  @click="toggleUserFollow(user.id, 'followers')"
                >
                  {{ user.isFollowing ? '已关注' : '回关' }}
                </button>
              </div>
            </div>
            <div v-else class="empty-state">
              <p>暂无粉丝</p>
            </div>
          </div>
          <div class="social-modal-footer">
            <button class="social-modal-close-btn" @click="hideFollowersModal">关闭</button>
          </div>
        </div>
      </div>
      
      <!-- 关注列表模态框 -->
      <div v-if="showFollowingModal" class="social-modal" @click="hideFollowingModal">
        <div class="social-modal-content" @click.stop>
          <div class="social-modal-header">
            <h3>关注列表 ({{ followingCount }})</h3>
            <button class="social-modal-close" @click="hideFollowingModal">&times;</button>
          </div>
          <div class="social-modal-body">
            <div v-if="followingList.length > 0" class="user-list">
              <div 
                v-for="user in followingList" 
                :key="user.id"
                class="user-list-item"
              >
                <img :src="user.avatar" alt="用户头像" class="user-list-avatar">
                <div class="user-list-info">
                  <div class="user-list-nickname">{{ user.nickname }}</div>
                </div>
                <button 
                  class="user-follow-btn"
                  :class="{ following: user.isFollowing }"
                  @click="toggleUserFollow(user.id, 'following')"
                >
                  {{ user.isFollowing ? '已关注' : '关注' }}
                </button>
              </div>
            </div>
            <div v-else class="empty-state">
              <p>暂无关注的用户</p>
            </div>
          </div>
          <div class="social-modal-footer">
            <button class="social-modal-close-btn" @click="hideFollowingModal">关闭</button>
          </div>
        </div>
      </div>
      
      <!-- 账号安全页面 -->
      <div v-else-if="$route.query.tab === 'security'" class="tab-content">
        <div class="security-management">
          <h3>账号安全</h3>
          <div class="security-list">
            <div class="security-item">
              <span class="security-label">修改密码</span>
              <button class="security-btn" @click="showChangePasswordModal = true">修改</button>
            </div>
            <div class="security-item">
              <span class="security-label">绑定手机</span>
              <span class="security-status">已绑定</span>
              <button class="security-btn small-btn">更换</button>
            </div>
            <div class="security-item">
              <span class="security-label">绑定邮箱</span>
              <button class="security-btn" @click="showBindEmailModal = true">绑定</button>
            </div>
            <div class="security-item">
              <span class="security-label">登录设备管理</span>
              <button class="security-btn" @click="showDevicesModal = true">管理</button>
            </div>
            <div class="security-item">
              <span class="security-label">两步验证</span>
              <span class="security-status warning">未开启</span>
              <button class="security-btn small-btn">开启</button>
            </div>
          </div>
          
          <div class="security-tips">
            <h4>安全提示</h4>
            <ul>
              <li>定期修改密码，使用强密码组合</li>
              <li>不要在公共设备上保持登录状态</li>
              <li>警惕钓鱼网站和诈骗信息</li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- 隐私设置页面 -->
      <div v-else-if="$route.query.tab === 'privacy'" class="tab-content">
        <div class="privacy-management">
          <h3>隐私设置</h3>
          <div class="privacy-section">
            <h4>个人信息可见性</h4>
            <div class="privacy-item">
              <div class="privacy-label">我的关注</div>
              <div class="privacy-control">
                <select v-model="privacySettings.showFollowing" class="privacy-select">
                  <option value="all">所有人可见</option>
                  <option value="friends">仅关注的人可见</option>
                  <option value="none">仅自己可见</option>
                </select>
              </div>
            </div>
            <div class="privacy-item">
              <div class="privacy-label">我的收藏</div>
              <div class="privacy-control">
                <select v-model="privacySettings.showFavorites" class="privacy-select">
                  <option value="all">所有人可见</option>
                  <option value="friends">仅关注的人可见</option>
                  <option value="none">仅自己可见</option>
                </select>
              </div>
            </div>
            <div class="privacy-item">
              <div class="privacy-label">我的动态</div>
              <div class="privacy-control">
                <select v-model="privacySettings.showActivities" class="privacy-select">
                  <option value="all">所有人可见</option>
                  <option value="friends">仅关注的人可见</option>
                  <option value="none">仅自己可见</option>
                </select>
              </div>
            </div>
          </div>
          
          <div class="privacy-section">
            <h4>互动设置</h4>
            <div class="privacy-item">
              <div class="privacy-label">允许评论我的视频</div>
              <div class="privacy-control">
                <label class="toggle-switch">
                  <input v-model="privacySettings.allowComments" type="checkbox" />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
            <div class="privacy-item">
              <div class="privacy-label">允许私信</div>
              <div class="privacy-control">
                <label class="toggle-switch">
                  <input v-model="privacySettings.allowMessages" type="checkbox" />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
            <div class="privacy-item">
              <div class="privacy-label">谁可以关注我</div>
              <div class="privacy-control">
                <select v-model="privacySettings.followPermission" class="privacy-select">
                  <option value="all">所有人</option>
                  <option value="friends">仅我关注的人</option>
                  <option value="approval">需要我的审核</option>
                </select>
              </div>
            </div>
          </div>
          
          <button class="save-button" @click="savePrivacySettings">保存设置</button>
        </div>
      </div>
      
      <!-- 黑名单管理 -->
      <div v-else-if="$route.query.tab === 'blacklist'" class="tab-content">
        <div class="blacklist-management">
          <h3>黑名单管理</h3>
          <div v-if="blacklist.length > 0" class="blacklist-list">
            <div v-for="(user, index) in blacklist" :key="index" class="blacklist-item">
              <div class="blacklist-user">
                <img v-img-error :src="user.avatar" alt="用户头像" class="blacklist-avatar">
                <div class="blacklist-info">
                  <div class="blacklist-username">{{ user.username }}</div>
                  <div class="blacklist-nickname">{{ user.nickname }}</div>
                </div>
              </div>
              <button class="remove-blacklist-btn" @click="removeFromBlacklist(index)">移除</button>
            </div>
          </div>
          <div v-else class="empty-blacklist">
            <p>黑名单中暂无用户</p>
          </div>
          <div class="blacklist-tips">
            <h4>黑名单说明</h4>
            <p>将用户加入黑名单后，对方无法：</p>
            <ul>
              <li>关注你或给你发私信</li>
              <li>评论你的视频或动态</li>
              <li>查看你的关注列表和粉丝列表</li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- 实名认证 -->
      <div v-else-if="$route.query.tab === 'verify'" class="tab-content">
        <div class="verify-management">
          <h3>实名认证</h3>
          <div v-if="verificationStatus === 'verified'" class="verification-verified">
            <div class="verified-icon">✅</div>
            <h4>恭喜，您已通过实名认证</h4>
            <p>认证信息：{{ realName }}（{{ idNumber }}）</p>
            <p class="verify-date">认证日期：{{ verificationDate }}</p>
          </div>
          <div v-else-if="verificationStatus === 'pending'" class="verification-pending">
            <div class="pending-icon">⏳</div>
            <h4>认证审核中</h4>
            <p>您的实名认证申请正在审核中，请耐心等待</p>
            <p class="verify-date">提交日期：{{ submissionDate }}</p>
          </div>
          <div v-else class="verification-form">
            <form @submit.prevent="submitVerification">
              <div class="form-row">
                <label class="form-label">真实姓名：</label>
                <input 
                  v-model="verifyForm.realName" 
                  type="text" 
                  class="form-input"
                  placeholder="请输入您的真实姓名"
                  required
                >
              </div>
              <div class="form-row">
                <label class="form-label">身份证号码：</label>
                <input 
                  v-model="verifyForm.idNumber" 
                  type="text" 
                  class="form-input"
                  placeholder="请输入您的身份证号码"
                  required
                >
              </div>
              <div class="form-row">
                <label class="form-label">身份证正面：</label>
                <input 
                  ref="idCardFrontInput" 
                  type="file"
                  accept="image/*" 
                  class="form-input"
                  required
                  @change="handleIdCardUpload('front', $event)"
                >
                <img v-if="verifyForm.idCardFront" :src="verifyForm.idCardFront" alt="身份证正面" class="id-card-preview">
              </div>
              <div class="form-row">
                <label class="form-label">身份证反面：</label>
                <input 
                  ref="idCardBackInput" 
                  type="file"
                  accept="image/*" 
                  class="form-input"
                  required
                  @change="handleIdCardUpload('back', $event)"
                >
                <img v-if="verifyForm.idCardBack" :src="verifyForm.idCardBack" alt="身份证反面" class="id-card-preview">
              </div>
              <div class="verify-notice">
                <p>⚠️ 注意事项：</p>
                <ul>
                  <li>请确保提交的信息真实有效</li>
                  <li>我们会保护您的个人隐私信息</li>
                  <li>审核时间通常为1-3个工作日</li>
                </ul>
              </div>
              <button type="submit" class="save-button">提交认证</button>
            </form>
          </div>
        </div>
      </div>
      
      <!-- 我的记录页面 -->
      <div v-else-if="$route.query.tab === 'history'" class="tab-content">
        <div class="history-management">
          <h3>浏览历史</h3>
          <div class="history-filters">
            <button class="filter-btn" @click="clearHistory">清空历史</button>
            <div class="history-tabs">
              <button class="history-tab-btn" :class="{ active: historyTab === 'videos' }" @click="historyTab = 'videos'">视频</button>
              <button class="history-tab-btn" :class="{ active: historyTab === 'articles' }" @click="historyTab = 'articles'">文章</button>
            </div>
          </div>
          
          <div v-if="historyTab === 'videos' && videoHistory.length > 0" class="history-list">
            <div v-for="(item, index) in videoHistory" :key="index" class="history-item">
              <div class="history-thumbnail">
                <img v-img-error :src="item.coverUrl" alt="视频封面" class="history-img">
                <span class="history-duration">{{ formatDuration(item.duration) }}</span>
              </div>
              <div class="history-info">
                <h4 class="history-title">{{ item.title }}</h4>
                <div class="history-meta">
                  <span class="history-author">{{ item.author }}</span>
                  <span class="history-separator">•</span>
                  <span class="history-views">{{ item.views }}次播放</span>
                  <span class="history-separator">•</span>
                  <span class="history-time">{{ formatHistoryTime(item.watchTime) }}</span>
                </div>
              </div>
              <button class="history-delete-btn" @click="deleteHistoryItem(index)">×</button>
            </div>
          </div>
          <div v-else-if="historyTab === 'articles' && articleHistory.length > 0" class="history-list">
            <div v-for="(item, index) in articleHistory" :key="index" class="history-item article-item">
              <div class="history-info">
                <h4 class="history-title">{{ item.title }}</h4>
                <div class="history-meta">
                  <span class="history-author">{{ item.author }}</span>
                  <span class="history-separator">•</span>
                  <span class="history-reads">{{ item.reads }}次阅读</span>
                  <span class="history-separator">•</span>
                  <span class="history-time">{{ formatHistoryTime(item.readTime) }}</span>
                </div>
              </div>
              <button class="history-delete-btn" @click="deleteHistoryItem(index, 'article')">×</button>
            </div>
          </div>
          <div v-else class="empty-history">
            <p>暂无浏览记录</p>
          </div>
        </div>
      </div>
      
      <!-- 通知设置页面 -->
      <div v-else-if="$route.query.tab === 'notifications'" class="tab-content">
        <div class="notifications-management">
          <h3>通知设置</h3>
          
          <div class="notification-section">
            <h4>消息通知</h4>
            <div class="notification-item">
              <div class="notification-label">评论与@消息</div>
              <div class="notification-control">
                <label class="toggle-switch">
                  <input v-model="notificationSettings.comments" type="checkbox" />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
            <div class="notification-item">
              <div class="notification-label">点赞与收藏</div>
              <div class="notification-control">
                <label class="toggle-switch">
                  <input v-model="notificationSettings.likes" type="checkbox" />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
            <div class="notification-item">
              <div class="notification-label">关注与粉丝</div>
              <div class="notification-control">
                <label class="toggle-switch">
                  <input v-model="notificationSettings.follows" type="checkbox" />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
          </div>
          
          <div class="notification-section">
            <h4>系统通知</h4>
            <div class="notification-item">
              <div class="notification-label">活动通知</div>
              <div class="notification-control">
                <label class="toggle-switch">
                  <input v-model="notificationSettings.activities" type="checkbox" />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
            <div class="notification-item">
              <div class="notification-label">更新提醒</div>
              <div class="notification-control">
                <label class="toggle-switch">
                  <input v-model="notificationSettings.updates" type="checkbox" />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
          </div>
          
          <div class="notification-section">
            <h4>邮件通知</h4>
            <div class="notification-item">
              <div class="notification-label">重要安全通知</div>
              <div class="notification-control">
                <label class="toggle-switch">
                  <input v-model="notificationSettings.emailSecurity" type="checkbox" checked disabled />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
            <div class="notification-item">
              <div class="notification-label">营销信息</div>
              <div class="notification-control">
                <label class="toggle-switch">
                  <input v-model="notificationSettings.emailMarketing" type="checkbox" />
                  <span class="toggle-slider"></span>
                </label>
              </div>
            </div>
          </div>
          
          <button class="save-button" @click="saveNotificationSettings">保存设置</button>
        </div>
      </div>
      
      <!-- 主题设置页面 -->
      <div v-else-if="$route.query.tab === 'theme'" class="tab-content">
        <div class="theme-settings">
          <h3>个性化主题设置</h3>
          <p class="theme-description">选择您喜欢的主题，让界面更加符合您的偏好</p>
          
          <div class="theme-options-grid">
            <div 
              v-for="theme in themeOptions" 
              :key="theme.value"
              class="theme-option-item"
              :class="{ active: currentTheme === theme.value }"
              @click="changeTheme(theme.value)"
            >
              <div class="theme-preview">
                <div class="theme-preview-header" :style="{ backgroundColor: theme.colors.primary }">
                  <div class="theme-preview-title"></div>
                  <div class="theme-preview-buttons">
                    <div class="theme-preview-button"></div>
                    <div class="theme-preview-button"></div>
                  </div>
                </div>
                <div class="theme-preview-content" :style="{ backgroundColor: theme.colors.background }">
                  <div class="theme-preview-text" :style="{ color: theme.colors.text }">Aa</div>
                  <div class="theme-preview-card" :style="{ backgroundColor: theme.colors.card }">
                    <div class="theme-preview-card-item" :style="{ backgroundColor: theme.colors.card }">
                      <div class="theme-preview-avatar" :style="{ backgroundColor: theme.colors.primary }"></div>
                      <div class="theme-preview-text" :style="{ color: theme.colors.textSecondary }">示例文本</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="theme-info">
                <div class="theme-name">{{ theme.name }}</div>
                <div class="theme-description">{{ theme.description }}</div>
              </div>
              <div v-if="currentTheme === theme.value" class="theme-checkmark">✓</div>
            </div>
          </div>
          
          <div class="theme-tips">
            <p>💡 提示：主题设置将保存在本地，下次访问时自动应用您的选择</p>
          </div>
        </div>
      </div>
      
      <!-- 活动时间线页面 -->
      <div v-else-if="$route.query.tab === 'activity'" class="tab-content">
        <div class="activity-settings">
          <div class="activity-header">
            <h3>活动时间线</h3>
            <button 
              class="mark-all-read-btn" 
              :disabled="getUnreadCount() === 0" 
              @click="markAllAsRead"
            >
              全部标为已读
            </button>
          </div>
          
          <!-- 活动筛选器 -->
          <div class="activity-filter">
            <button 
              v-for="filter in ['all', 'login', 'like', 'follow', 'upload', 'achievement', 'comment']" 
              :key="filter"
              class="filter-btn"
              :class="{ 'active': timelineFilter === filter }"
              @click="timelineFilter = filter"
            >
              {{ getFilterLabel(filter) }}
            </button>
          </div>
          
          <!-- 活动时间线列表 -->
          <div class="activity-list">
            <div 
              v-for="activity in getFilteredTimeline()" 
              :key="activity.id"
              class="activity-item"
              :class="{ 'unread': !activity.read }"
              @click="markActivityAsRead(activity.id)"
            >
              <div class="activity-icon">
                {{ activity.icon }}
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-description">{{ activity.description }}</div>
                <div class="activity-time">{{ formatTimelineTime(activity.timestamp) }}</div>
              </div>
              <div v-if="!activity.read" class="activity-indicator">
                <span class="unread-dot"></span>
              </div>
            </div>
            
            <div v-if="getFilteredTimeline().length === 0" class="empty-timeline">
              <p>暂无活动记录</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 其他页面的基础内容 -->
      <div v-else class="tab-content">
        <div class="basic-content">
          <h3>{{ getTabTitle() }}</h3>
          <p>功能正在开发中，敬请期待...</p>
          <router-link to="/profile" class="back-link">返回个人信息</router-link>
        </div>
      </div>
    </div>

    <!-- 头像预览模态框 -->
    <div v-if="showAvatarModal" class="avatar-modal" @click="closeAvatarModal">
      <div class="avatar-modal-content" @click.stop>
        <div class="avatar-modal-header">
          <h3>预览头像</h3>
          <button class="avatar-modal-close" @click="closeAvatarModal">&times;</button>
        </div>
        <div class="avatar-modal-body">
          <div class="avatar-crop-container">
            <img v-img-error :src="avatarPreviewUrl" alt="头像预览" class="avatar-crop-preview">
          </div>
          <p class="avatar-crop-hint">拖动调整头像，点击保存确认</p>
        </div>
        <div class="avatar-modal-footer">
          <button class="avatar-modal-cancel" @click="closeAvatarModal">取消</button>
          <button class="avatar-modal-save" @click="saveAvatar">保存</button>
        </div>
      </div>
    </div>
    
    <!-- 新增：头像历史记录模态框 -->
    <div v-if="showAvatarHistoryModal" class="avatar-modal" @click="closeAvatarHistoryModal">
      <div class="avatar-modal-content avatar-history-modal-content" @click.stop>
        <div class="avatar-modal-header">
          <h3>历史头像</h3>
          <button class="avatar-modal-close" @click="closeAvatarHistoryModal">&times;</button>
        </div>
        <div class="avatar-modal-body">
          <div class="avatar-history-container">
            <div 
              v-for="(avatar, index) in avatarHistory" 
              :key="index"
              class="avatar-history-item"
              @click="selectHistoryAvatar(avatar)"
            >
              <img v-img-error :src="avatar" :alt="`历史头像${index + 1}`" class="history-avatar-img">
              <span v-if="selectedHistoryAvatar === avatar" class="avatar-select-mask">✓</span>
            </div>
          </div>
          <p class="avatar-history-hint">点击头像即可使用</p>
        </div>
        <div class="avatar-modal-footer">
          <button class="avatar-modal-cancel" @click="closeAvatarHistoryModal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'ProfileView',
  data() {
    return {
      editForm: {
        nickname: '沛拉不',
        username: 'bili_20179551666',
        signature: '设置您的签名~(～￣▽￣)～',
        gender: 'secret',
        birthday: '2021-11-18',
      },
      userInfo: {
        coins: 128, // 用户硬币数量
        avatar: 'https://placehold.co/200x200/00a1d6/ffffff?text=用户',
        level: 5, // 用户等级
        vip: true, // VIP状态
        following: 128, // 关注数
        followers: 536, // 粉丝数
      },
      // 成就相关数据
      achievements: [],
      totalAchievements: 0,
      totalPoints: 0,
      achievementCategories: ['全部', '基础', '社交', '创作', '活动'],
      activeAchievementCategory: '全部',
      showAchievementDetails: false,
      selectedAchievement: null,
      // 社交互动相关数据
      isOwnProfile: true, // 默认假设是自己的主页
      followingCount: 0,
      followersCount: 0,
      isFollowing: false,
      showFollowersModal: false,
      showFollowingModal: false,
      followersList: [],
      followingList: [],
      
      // 主题设置相关数据
      currentTheme: 'light',
      themeOptions: [
        { 
          id: 'light', 
          value: 'light',
          name: '明亮模式', 
          icon: '☀️',
          description: '默认明亮主题',
          colors: {
            primary: '#00a1d6',
            background: '#ffffff',
            text: '#212121',
            textSecondary: '#757575',
            card: '#f5f5f5',
          },
        },
        { 
          id: 'dark', 
          value: 'dark',
          name: '暗黑模式', 
          icon: '🌙',
          description: '护眼暗黑主题',
          colors: {
            primary: '#00a1d6',
            background: '#18191c',
            text: '#f5f5f5',
            textSecondary: '#a9abb8',
            card: '#242529',
          },
        },
        { 
          id: 'blue', 
          value: 'blue',
          name: '蓝色主题', 
          icon: '🔵',
          description: '清新蓝色主题',
          colors: {
            primary: '#1e88e5',
            background: '#e3f2fd',
            text: '#1565c0',
            textSecondary: '#42a5f5',
            card: '#bbdefb',
          },
        },
        { 
          id: 'green', 
          value: 'green',
          name: '绿色主题', 
          icon: '🟢',
          description: '自然绿色主题',
          colors: {
            primary: '#2e7d32',
            background: '#e8f5e9',
            text: '#1b5e20',
            textSecondary: '#388e3c',
            card: '#c8e6c9',
          },
        },
        { 
          id: 'purple', 
          value: 'purple',
          name: '紫色主题', 
          icon: '🟣',
          description: '优雅紫色主题',
          colors: {
            primary: '#6a1b9a',
            background: '#f3e5f5',
            text: '#4a148c',
            textSecondary: '#7b1fa2',
            card: '#e1bee7',
          },
        },
      ],
      showAvatarModal: false,
      avatarPreviewUrl: '',
      tempAvatarFile: null,
      // 新增：头像历史记录相关状态
      showAvatarHistoryModal: false,
      avatarHistory: [],
      selectedHistoryAvatar: '',
      // 创作者中心相关状态
      activeTab: 'info', // info, security, privacy, creator
      creatorSubTab: 'upload', // upload, videos, drafts
      selectedVideoFile: null,
      uploadForm: {
        title: '',
        description: '',
        category: '',
        tags: '',
        coverUrl: '',
      },
      userVideos: [],
      userDrafts: [],
      totalViews: 0,
      totalVideos: 0,
      // 账号安全相关状态
      showChangePasswordModal: false,
      showBindEmailModal: false,
      showDevicesModal: false,
      // 隐私设置相关状态
      privacySettings: {
        showFollowing: 'all',
        showFavorites: 'none',
        showActivities: 'friends',
        allowComments: true,
        allowMessages: true,
        followPermission: 'all',
      },
      // 黑名单相关状态
      blacklist: [],
      // 活动时间线相关状态
      activityTimeline: [],
      timelineFilter: 'all',
      // 实名认证相关状态
      verificationStatus: 'unverified', // unverified, pending, verified
      verifyForm: {
        realName: '',
        idNumber: '',
        idCardFront: '',
        idCardBack: '',
      },
      realName: '',
      idNumber: '',
      verificationDate: '',
      submissionDate: '',
      // 浏览历史相关状态
      historyTab: 'videos',
      videoHistory: [],
      articleHistory: [],
      // 通知设置相关状态
      notificationSettings: {
        comments: true,
        likes: true,
        follows: true,
        activities: true,
        updates: true,
        emailSecurity: true,
        emailMarketing: false,
      },
    }
  },
  watch: {
    // 监听路由参数变化
    $route(to) {
      const tab = to.query.tab || 'info'
      this.activeTab = tab === 'creator' ? 'creator' : 'info'
      if (tab === 'creator') {
        this.loadCreatorData()
      }
      // 可以在这里添加其他tab的处理逻辑
    },
  },
  
  // 页面加载时初始化tab
  mounted() {
    const tab = this.$route.query.tab || 'info'
    this.activeTab = tab === 'creator' ? 'creator' : 'info'
    if (tab === 'creator') {
      this.loadCreatorData()
    }
    this.loadUserData()
    // 初始化主题设置
    this.initializeTheme()
    // 加载活动时间线
    this.loadActivityTimeline()
  },
  mounted() {
    this.loadUserData()
    // 初始化时设置activeTab为info
    this.activeTab = 'info'
    // 初始化时加载创作者数据
    this.loadCreatorData()
    // 初始化时加载成就数据
    this.loadAchievements()
    // 加载社交数据
    this.loadSocialData()
  },
  
  methods: {
    saveProfileChanges() {
      // 表单验证
      if (!this.editForm.nickname.trim()) {
        alert('昵称不能为空')
        return
      }
      
      if (this.editForm.nickname.length > 20) {
        alert('昵称不能超过20个字符')
        return
      }

      // 检查昵称是否有变化，有变化则检查硬币数量
      const currentUser = JSON.parse(localStorage.getItem('currentUser'))
      if (currentUser && currentUser.nickname !== this.editForm.nickname && this.userInfo.coins < 6) {
        alert('硬币不足，修改昵称需要消耗6个硬币')
        return
      }
      
      // 保存到localStorage
      const updatedUser = {
        ...currentUser,
        ...this.editForm,
        avatar: this.userInfo.avatar,
      }
      
      // 如果昵称有变化，扣除硬币
      if (currentUser && currentUser.nickname !== this.editForm.nickname) {
        this.userInfo.coins -= 6
        updatedUser.coins = this.userInfo.coins
      }
      
      localStorage.setItem('currentUser', JSON.stringify(updatedUser))
      console.log('个人资料已保存到localStorage')
      
      // 显示保存成功提示
      alert('个人资料已更新！')
    },
    
    // 从localStorage加载用户数据
    loadUserData() {
      const currentUser = JSON.parse(localStorage.getItem('currentUser'))
      if (currentUser) {
        this.editForm = {
          nickname: currentUser.nickname || '沛拉不',
          username: currentUser.username || 'bili_20179551666',
          signature: currentUser.signature || '设置您的签名~(～￣▽￣)～',
          gender: currentUser.gender || 'secret',
          birthday: currentUser.birthday || '2021-11-18',
        }
        this.userInfo.coins = currentUser.coins || 128
        this.userInfo.avatar = currentUser.avatar || 'https://placehold.co/200x200/00a1d6/ffffff?text=用户'
        this.userInfo.level = currentUser.level || 5
        this.userInfo.vip = currentUser.vip || false
        this.userInfo.following = currentUser.following || 128
        this.userInfo.followers = currentUser.followers || 536
      }
      // 加载头像历史记录
      this.loadAvatarHistory()
      // 加载隐私设置
      this.loadPrivacySettings()
      // 加载黑名单
      this.loadBlacklist()
      // 加载实名认证状态
      this.loadVerificationStatus()
      // 加载浏览历史
      this.loadHistory()
      // 加载通知设置
      this.loadNotificationSettings()
      // 加载创作者数据
      this.loadCreatorData()
      // 加载用户成就
      this.loadAchievements()
    },
    
    // 活动时间线相关方法
    loadActivityTimeline() {
      const currentUser = JSON.parse(localStorage.getItem('currentUser'))
      if (currentUser && currentUser.activityTimeline) {
        this.activityTimeline = currentUser.activityTimeline
      } else {
        // 初始化模拟活动时间线数据
        this.activityTimeline = [
          {
            id: 1,
            type: 'login',
            title: '登录成功',
            description: '您的账号在新设备上登录',
            timestamp: new Date(Date.now() - 3600000).toISOString(),
            icon: '🔓',
            read: false,
          },
          {
            id: 2,
            type: 'like',
            title: '获得点赞',
            description: '您的视频《家常菜制作教程》获得了10个新点赞',
            timestamp: new Date(Date.now() - 7200000).toISOString(),
            icon: '👍',
            read: true,
          },
          {
            id: 3,
            type: 'follow',
            title: '新增粉丝',
            description: '有5位新用户关注了您',
            timestamp: new Date(Date.now() - 86400000).toISOString(),
            icon: '👥',
            read: true,
          },
          {
            id: 4,
            type: 'upload',
            title: '视频发布',
            description: '您的视频《家常菜制作教程》已成功发布',
            timestamp: new Date(Date.now() - 172800000).toISOString(),
            icon: '🎬',
            read: true,
          },
          {
            id: 5,
            type: 'achievement',
            title: '成就解锁',
            description: '恭喜您解锁了「发布达人」成就',
            timestamp: new Date(Date.now() - 259200000).toISOString(),
            icon: '🏆',
            read: true,
          },
          {
            id: 6,
            type: 'comment',
            title: '新评论',
            description: '用户「美食爱好者」评论了您的视频',
            timestamp: new Date(Date.now() - 345600000).toISOString(),
            icon: '💬',
            read: true,
          },
        ]
        
        // 保存到localStorage
        if (currentUser) {
          currentUser.activityTimeline = this.activityTimeline
          localStorage.setItem('currentUser', JSON.stringify(currentUser))
        }
      }
    },
    
    markActivityAsRead(activityId) {
      const activity = this.activityTimeline.find(item => item.id === activityId)
      if (activity) {
        activity.read = true
        this.saveActivityTimeline()
      }
    },
    
    markAllAsRead() {
      this.activityTimeline.forEach(activity => {
        activity.read = true
      })
      this.saveActivityTimeline()
      alert('所有活动已标记为已读！')
    },
    
    saveActivityTimeline() {
      const currentUser = JSON.parse(localStorage.getItem('currentUser'))
      if (currentUser) {
        currentUser.activityTimeline = this.activityTimeline
        localStorage.setItem('currentUser', JSON.stringify(currentUser))
      }
    },
    
    formatTimelineTime(dateString) {
      const date = new Date(dateString)
      const now = new Date()
      const diffMs = now - date
      const diffMins = Math.floor(diffMs / 60000)
      const diffHours = Math.floor(diffMs / 3600000)
      const diffDays = Math.floor(diffMs / 86400000)
      
      if (diffMins < 60) {
        return `${diffMins}分钟前`
      } else if (diffHours < 24) {
        return `${diffHours}小时前`
      } else if (diffDays < 7) {
        return `${diffDays}天前`
      } else {
        return this.formatDate(dateString)
      }
    },
    
    getFilteredTimeline() {
      if (this.timelineFilter === 'all') {
        return this.activityTimeline
      } else {
        return this.activityTimeline.filter(activity => activity.type === this.timelineFilter)
      }
    },
    
    getUnreadCount() {
      return this.activityTimeline.filter(activity => !activity.read).length
    },
    
    getFilterLabel(filter) {
      const labels = {
        'all': '全部',
        'login': '登录',
        'like': '点赞',
        'follow': '关注',
        'upload': '上传',
        'achievement': '成就',
        'comment': '评论',
      }
      return labels[filter] || filter
    },
    // 加载头像历史记录
    loadAvatarHistory() {
      const currentUser = JSON.parse(localStorage.getItem('currentUser'))
      if (currentUser && currentUser.avatarHistory) {
        this.avatarHistory = currentUser.avatarHistory
      } else {
        // 如果没有历史记录，初始化一些示例数据
        this.avatarHistory = [
          'https://placehold.co/100x100/00a1d6/ffffff?text=历史1',
          'https://placehold.co/100x100/FB7299/ffffff?text=历史2',
          'https://placehold.co/100x100/5D5D5D/ffffff?text=历史3',
        ]
        // 保存到localStorage
        if (currentUser) {
          currentUser.avatarHistory = this.avatarHistory
          localStorage.setItem('currentUser', JSON.stringify(currentUser))
        }
      }
    },
    
    // 打开头像历史记录模态框
    openAvatarHistoryModal() {
      this.showAvatarHistoryModal = true
    },
    
    // 关闭头像历史记录模态框
    closeAvatarHistoryModal() {
      this.showAvatarHistoryModal = false
      this.selectedHistoryAvatar = ''
    },
    
    // 选择历史头像
    selectHistoryAvatar(avatarUrl) {
      this.selectedHistoryAvatar = avatarUrl
      this.avatarPreviewUrl = avatarUrl
      this.showAvatarHistoryModal = false
      this.showAvatarModal = true
    },
    
    // 触发头像上传
    triggerAvatarUpload() {
      this.$refs.avatarInput.click()
    },
    
    // 处理头像文件选择
    handleAvatarChange(event) {
      const file = event.target.files[0]
      if (!file) return
      
      // 检查文件类型
      const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
      if (!validTypes.includes(file.type)) {
        alert('请上传有效的图片文件（JPG、PNG、GIF、WebP）')
        return
      }
      
      // 检查文件大小（限制5MB）
      if (file.size > 5 * 1024 * 1024) {
        alert('文件大小不能超过5MB')
        return
      }
      
      // 保存临时文件引用
      this.tempAvatarFile = file
      
      // 创建文件读取器显示预览
      const reader = new FileReader()
      reader.onload = (e) => {
        this.avatarPreviewUrl = e.target.result
        this.showAvatarModal = true
      }
      reader.readAsDataURL(file)
    },
    
    // 关闭头像模态框
    closeAvatarModal() {
      this.showAvatarModal = false
      this.tempAvatarFile = null
      // 清空文件输入，允许重新选择相同文件
      if (this.$refs.avatarInput) {
        this.$refs.avatarInput.value = ''
      }
    },
    
    // 保存头像
    saveAvatar() {
      try {
        // 更新头像显示
        this.userInfo.avatar = this.avatarPreviewUrl
        
        // 保存到localStorage
        const currentUser = JSON.parse(localStorage.getItem('currentUser'))
        if (currentUser) {
          // 确保avatarHistory存在
          if (!currentUser.avatarHistory) {
            currentUser.avatarHistory = []
          }
          
          // 将当前头像添加到历史记录（如果不存在的话）
          if (!currentUser.avatarHistory.includes(this.avatarPreviewUrl)) {
            // 限制历史记录数量，最多保存5个
            if (currentUser.avatarHistory.length >= 5) {
              currentUser.avatarHistory.pop() // 移除最旧的记录
            }
            // 添加到历史记录开头
            currentUser.avatarHistory.unshift(this.avatarPreviewUrl)
          }
          
          localStorage.setItem('currentUser', JSON.stringify({
            ...currentUser,
            avatar: this.avatarPreviewUrl,
            avatarHistory: currentUser.avatarHistory,
          }))
          console.log('头像已保存到localStorage')
          
          // 更新本地头像历史记录
          this.avatarHistory = currentUser.avatarHistory
          
          // 通知App组件更新用户信息
          if (window.appInstance && window.appInstance.checkLoginStatus) {
            window.appInstance.checkLoginStatus()
            console.log('已通知App组件更新用户信息')
          }
        }
        
        // 关闭模态框
        this.closeAvatarModal()
        
        // 显示保存成功提示
        alert('头像已更新！')
      } catch (error) {
        console.error('保存头像失败:', error)
        alert('保存失败，请重试')
      }
    },
    
    // 切换到创作者中心
    getTabTitle() {
      const tab = this.$route.query.tab
      const titles = {
        'avatar': '我的头像',
        'fan-badges': '粉丝勋章',
        'achievements': '我的成就',
        'security': '账号安全',
        'privacy': '隐私设置',
        'creator': '创作者中心',
        'notifications': '消息通知',
        'favorites': '我的收藏',
        'history': '浏览历史',
        'settings': '设置',
      }
      return titles[tab] || '个人中心'
    },

    // 加载创作者数据
    loadCreatorData() {
      const currentUser = JSON.parse(localStorage.getItem('currentUser'))
      if (currentUser) {
        // 加载用户视频
        this.userVideos = currentUser.videos || []
        this.totalVideos = this.userVideos.length
        
        // 计算总播放量
        this.totalViews = this.userVideos.reduce((total, video) => total + (video.views || 0), 0)
        
        // 加载草稿
        this.userDrafts = currentUser.drafts || []
      } else {
        // 没有用户数据时，使用模拟数据
        this.userVideos = []
        this.userDrafts = []
        this.totalViews = 0
        this.totalVideos = 0
      }
    },

    // 触发视频上传
    triggerVideoUpload() {
      this.$refs.videoInput.click()
    },

    // 处理视频文件选择
    handleVideoSelect(event) {
      const file = event.target.files[0]
      if (!file) return
      
      // 检查文件类型
      const validTypes = ['video/mp4', 'video/webm', 'video/avi']
      if (!validTypes.includes(file.type)) {
        alert('请上传有效的视频文件（MP4、WebM、AVI）')
        return
      }
      
      // 检查文件大小（限制2GB）
      if (file.size > 2 * 1024 * 1024 * 1024) {
        alert('文件大小不能超过2GB')
        return
      }
      
      this.selectedVideoFile = file
      this.uploadForm.title = file.name.replace(/\.[^/.]+$/, '')
    },

    // 处理视频拖放上传
    handleVideoDrop(event) {
      event.preventDefault()
      const file = event.dataTransfer.files[0]
      if (!file) return
      
      // 调用处理视频选择的方法
      this.selectedVideoFile = file
      this.uploadForm.title = file.name.replace(/\.[^/.]+$/, '')
    },

    // 触发封面上传
    triggerCoverUpload() {
      this.$refs.coverInput.click()
    },

    // 处理封面上传
    handleCoverUpload(event) {
      const file = event.target.files[0]
      if (!file) return
      
      // 检查文件类型
      const validTypes = ['image/jpeg', 'image/png']
      if (!validTypes.includes(file.type)) {
        alert('请上传有效的图片文件（JPG、PNG）')
        return
      }
      
      // 检查文件大小（限制10MB）
      if (file.size > 10 * 1024 * 1024) {
        alert('文件大小不能超过10MB')
        return
      }
      
      // 创建文件读取器显示预览
      const reader = new FileReader()
      reader.onload = (e) => {
        this.uploadForm.coverUrl = e.target.result
      }
      reader.readAsDataURL(file)
    },

    // 保存为草稿
    saveAsDraft() {
      if (!this.selectedVideoFile) {
        alert('请先上传视频文件')
        return
      }
      
      if (!this.uploadForm.title.trim()) {
        alert('请输入视频标题')
        return
      }
      
      const draft = {
        id: Date.now(),
        title: this.uploadForm.title,
        description: this.uploadForm.description,
        category: this.uploadForm.category,
        tags: this.uploadForm.tags,
        coverUrl: this.uploadForm.coverUrl,
        fileSize: this.selectedVideoFile.size,
        saveDate: new Date().toISOString(),
      }
      
      // 保存到localStorage
      const currentUser = JSON.parse(localStorage.getItem('currentUser')) || {}
      currentUser.drafts = currentUser.drafts || []
      currentUser.drafts.unshift(draft)
      localStorage.setItem('currentUser', JSON.stringify(currentUser))
      
      // 更新本地数据
      this.userDrafts.unshift(draft)
      
      alert('草稿已保存！')
      this.resetUploadForm()
    },

    // 发布视频
    publishVideo() {
      if (!this.selectedVideoFile) {
        alert('请先上传视频文件')
        return
      }
      
      if (!this.uploadForm.title.trim()) {
        alert('请输入视频标题')
        return
      }
      
      if (!this.uploadForm.category) {
        alert('请选择视频分区')
        return
      }
      
      const video = {
        id: Date.now(),
        title: this.uploadForm.title,
        description: this.uploadForm.description,
        category: this.uploadForm.category,
        tags: this.uploadForm.tags,
        coverUrl: this.uploadForm.coverUrl || 'https://placehold.co/1280x720/00a1d6/ffffff?text=视频封面',
        duration: Math.floor(Math.random() * 600) + 60, // 模拟视频时长（1-11分钟）
        views: 0,
        likes: 0,
        publishDate: new Date().toISOString(),
      }
      
      // 保存到localStorage
      const currentUser = JSON.parse(localStorage.getItem('currentUser')) || {}
      currentUser.videos = currentUser.videos || []
      currentUser.videos.unshift(video)
      localStorage.setItem('currentUser', JSON.stringify(currentUser))
      
      // 更新本地数据
      this.userVideos.unshift(video)
      this.totalVideos++
      
      alert('视频发布成功！')
      this.resetUploadForm()
      this.creatorSubTab = 'videos'
    },

    // 重置上传表单
    resetUploadForm() {
      this.selectedVideoFile = null
      this.uploadForm = {
        title: '',
        description: '',
        category: '',
        tags: '',
        coverUrl: '',
      }
      if (this.$refs.videoInput) {
        this.$refs.videoInput.value = ''
      }
      if (this.$refs.coverInput) {
        this.$refs.coverInput.value = ''
      }
    },

    // 编辑视频
    editVideo(video) {
      this.creatorSubTab = 'upload'
      this.uploadForm = {
        title: video.title,
        description: video.description,
        category: video.category,
        tags: video.tags,
        coverUrl: video.coverUrl,
      }
      // 注意：实际应用中需要重新上传视频文件
      alert('进入编辑模式，请重新上传视频文件')
    },

    // 删除视频
    deleteVideo(videoId) {
      if (confirm('确定要删除这个视频吗？')) {
        const currentUser = JSON.parse(localStorage.getItem('currentUser'))
        if (currentUser && currentUser.videos) {
          currentUser.videos = currentUser.videos.filter(video => video.id !== videoId)
          localStorage.setItem('currentUser', JSON.stringify(currentUser))
          
          // 更新本地数据
          this.userVideos = currentUser.videos
          this.totalVideos = this.userVideos.length
          this.totalViews = this.userVideos.reduce((total, video) => total + (video.views || 0), 0)
        }
      }
    },

    // 查看视频数据
    viewVideoStats(videoId) {
      const video = this.userVideos.find(v => v.id === videoId)
      if (video) {
        alert(`视频数据：\n标题：${video.title}\n播放量：${video.views}\n点赞数：${video.likes}\n发布时间：${this.formatDate(video.publishDate)}`)
      }
    },

    // 继续编辑草稿
    continueDraft(draft) {
      this.creatorSubTab = 'upload'
      this.uploadForm = {
        title: draft.title,
        description: draft.description,
        category: draft.category,
        tags: draft.tags,
        coverUrl: draft.coverUrl,
      }
      // 注意：实际应用中需要恢复视频文件
      alert('进入编辑模式，请重新上传视频文件')
    },

    // 删除草稿
    deleteDraft(draftId) {
      if (confirm('确定要删除这个草稿吗？')) {
        const currentUser = JSON.parse(localStorage.getItem('currentUser'))
        if (currentUser && currentUser.drafts) {
          currentUser.drafts = currentUser.drafts.filter(draft => draft.id !== draftId)
          localStorage.setItem('currentUser', JSON.stringify(currentUser))
          
          // 更新本地数据
          this.userDrafts = currentUser.drafts
        }
      }
    },

    // 跳转到上传页面
    goToUpload() {
      this.creatorSubTab = 'upload'
    },

    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },

    // 格式化时长
    formatDuration(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = seconds % 60
      return `${minutes}:${String(remainingSeconds).padStart(2, '0')}`
    },

    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes === 0) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },
    
    // 社交互动相关方法
    loadSocialData() {
      // 在实际应用中，这里会从API获取数据
      // 模拟数据
      this.followingCount = this.userInfo.following || 56
      this.followersCount = this.userInfo.followers || 234
      
      // 模拟关注/粉丝列表
      this.followingList = [
        { id: 1, nickname: '创作者小明', avatar: 'https://picsum.photos/200/200?random=1', isFollowing: true },
        { id: 2, nickname: '设计达人', avatar: 'https://picsum.photos/200/200?random=2', isFollowing: true },
        { id: 3, nickname: '科技前沿', avatar: 'https://picsum.photos/200/200?random=3', isFollowing: true },
        { id: 4, nickname: '美食博主', avatar: 'https://picsum.photos/200/200?random=4', isFollowing: true },
        { id: 5, nickname: '旅行家', avatar: 'https://picsum.photos/200/200?random=5', isFollowing: true },
      ]
      
      this.followersList = [
        { id: 101, nickname: '忠实粉丝A', avatar: 'https://picsum.photos/200/200?random=10', isFollowing: false },
        { id: 102, nickname: '支持者B', avatar: 'https://picsum.photos/200/200?random=11', isFollowing: true },
        { id: 103, nickname: '爱好者C', avatar: 'https://picsum.photos/200/200?random=12', isFollowing: false },
        { id: 104, nickname: '朋友D', avatar: 'https://picsum.photos/200/200?random=13', isFollowing: true },
        { id: 105, nickname: '粉丝E', avatar: 'https://picsum.photos/200/200?random=14', isFollowing: false },
      ]
    },
    
    toggleFollow() {
      // 在实际应用中，这里会调用API来关注或取消关注
      this.isFollowing = !this.isFollowing
      if (this.isFollowing) {
        this.followersCount++
      } else {
        this.followersCount = Math.max(0, this.followersCount - 1)
      }
      
      // 模拟API调用后的反馈
      this.$message({
        message: this.isFollowing ? '关注成功' : '已取消关注',
        type: 'success',
        duration: 1500,
      })
    },
    
    showFollowersList() {
      this.showFollowersModal = true
    },
    
    hideFollowersModal() {
      this.showFollowersModal = false
    },
    
    showFollowingList() {
      this.showFollowingModal = true
    },
    
    hideFollowingModal() {
      this.showFollowingModal = false
    },
    
    toggleUserFollow(userId, listType) {
      // 在实际应用中，这里会调用API
      const list = listType === 'followers' ? this.followersList : this.followingList
      const user = list.find(u => u.id === userId)
      
      if (user) {
        user.isFollowing = !user.isFollowing
        
        if (listType === 'following' && !user.isFollowing) {
          // 从关注列表中移除
          this.followingCount = Math.max(0, this.followingCount - 1)
        } else if (listType === 'followers' && user.isFollowing) {
          // 回关粉丝
          this.followingCount++
        }
      }
    },
    
    // 主题设置相关方法
    initializeTheme() {
      // 从本地存储获取保存的主题，如果没有则使用默认主题
      const savedTheme = localStorage.getItem('userTheme')
      if (savedTheme) {
        this.currentTheme = savedTheme
      }
      // 应用主题到页面
      this.applyTheme(this.currentTheme)
    },
    
    changeTheme(themeId) {
      // 更新当前主题
      this.currentTheme = themeId
      // 保存到本地存储
      localStorage.setItem('userTheme', themeId)
      // 应用主题到页面
      this.applyTheme(themeId)
    },
    
    applyTheme(themeId) {
      // 移除所有主题类
      document.body.classList.remove('theme-light', 'theme-dark', 'theme-blue', 'theme-green', 'theme-purple')
      // 添加新主题类
      document.body.classList.add(`theme-${themeId}`)
      
      // 根据主题设置全局样式变量
      const root = document.documentElement
      
      switch (themeId) {
        case 'light':
          root.style.setProperty('--primary-bg', '#ffffff')
          root.style.setProperty('--secondary-bg', '#f8f9fa')
          root.style.setProperty('--text-primary', '#333333')
          root.style.setProperty('--text-secondary', '#666666')
          root.style.setProperty('--border-color', '#e0e0e0')
          root.style.setProperty('--accent-color', '#3a86ff')
          break
        case 'dark':
          root.style.setProperty('--primary-bg', '#121212')
          root.style.setProperty('--secondary-bg', '#1e1e1e')
          root.style.setProperty('--text-primary', '#e0e0e0')
          root.style.setProperty('--text-secondary', '#a0a0a0')
          root.style.setProperty('--border-color', '#333333')
          root.style.setProperty('--accent-color', '#528bff')
          break
        case 'blue':
          root.style.setProperty('--primary-bg', '#ffffff')
          root.style.setProperty('--secondary-bg', '#f0f8ff')
          root.style.setProperty('--text-primary', '#1a237e')
          root.style.setProperty('--text-secondary', '#3f51b5')
          root.style.setProperty('--border-color', '#bbdefb')
          root.style.setProperty('--accent-color', '#2196f3')
          break
        case 'green':
          root.style.setProperty('--primary-bg', '#ffffff')
          root.style.setProperty('--secondary-bg', '#f1f8e9')
          root.style.setProperty('--text-primary', '#2e7d32')
          root.style.setProperty('--text-secondary', '#388e3c')
          root.style.setProperty('--border-color', '#c8e6c9')
          root.style.setProperty('--accent-color', '#4caf50')
          break
        case 'purple':
          root.style.setProperty('--primary-bg', '#ffffff')
          root.style.setProperty('--secondary-bg', '#f3e5f5')
          root.style.setProperty('--text-primary', '#4a148c')
          root.style.setProperty('--text-secondary', '#7b1fa2')
          root.style.setProperty('--border-color', '#e1bee7')
          root.style.setProperty('--accent-color', '#9c27b0')
          break
      }
    },

    // 隐私设置相关方法
    loadPrivacySettings() {
      const settings = JSON.parse(localStorage.getItem('privacySettings'))
      if (settings) {
        this.privacySettings = { ...this.privacySettings, ...settings }
      }
    },
    savePrivacySettings() {
      localStorage.setItem('privacySettings', JSON.stringify(this.privacySettings))
      alert('隐私设置已保存！')
    },

    // 黑名单相关方法
    loadBlacklist() {
      const currentUser = JSON.parse(localStorage.getItem('currentUser'))
      if (currentUser && currentUser.blacklist) {
        this.blacklist = currentUser.blacklist
      } else {
        // 初始化一些模拟数据
        this.blacklist = [
          {
            username: 'user123',
            nickname: '测试用户1',
            avatar: 'https://placehold.co/40x40/FF0000/FFFFFF?text=黑',
          },
          {
            username: 'spammer456',
            nickname: '广告用户',
            avatar: 'https://placehold.co/40x40/FF0000/FFFFFF?text=黑',
          },
        ]
      }
    },
    removeFromBlacklist(index) {
      if (confirm('确定要从黑名单中移除该用户吗？')) {
        this.blacklist.splice(index, 1)
        const currentUser = JSON.parse(localStorage.getItem('currentUser')) || {}
        currentUser.blacklist = this.blacklist
        localStorage.setItem('currentUser', JSON.stringify(currentUser))
        alert('已从黑名单中移除')
      }
    },

    // 实名认证相关方法
    loadVerificationStatus() {
      const verificationData = JSON.parse(localStorage.getItem('verificationData'))
      if (verificationData) {
        this.verificationStatus = verificationData.status || 'unverified'
        this.realName = verificationData.realName || ''
        this.idNumber = verificationData.idNumber ? verificationData.idNumber.replace(/(\d{6})\d{8}(\d{4})/, '$1********$2') : ''
        this.verificationDate = verificationData.verificationDate || ''
        this.submissionDate = verificationData.submissionDate || ''
      }
    },
    handleIdCardUpload(type, event) {
      const file = event.target.files[0]
      if (!file) return
      
      const validTypes = ['image/jpeg', 'image/png']
      if (!validTypes.includes(file.type)) {
        alert('请上传有效的图片文件（JPG、PNG）')
        return
      }
      
      if (file.size > 10 * 1024 * 1024) {
        alert('文件大小不能超过10MB')
        return
      }
      
      const reader = new FileReader()
      reader.onload = (e) => {
        if (type === 'front') {
          this.verifyForm.idCardFront = e.target.result
        } else {
          this.verifyForm.idCardBack = e.target.result
        }
      }
      reader.readAsDataURL(file)
    },
    submitVerification() {
      // 验证表单
      if (!this.verifyForm.realName || !this.verifyForm.idNumber) {
        alert('请填写完整的认证信息')
        return
      }
      
      if (!this.verifyForm.idCardFront || !this.verifyForm.idCardBack) {
        alert('请上传身份证正反面照片')
        return
      }
      
      // 保存提交信息
      const submissionDate = new Date().toISOString()
      const verificationData = {
        status: 'pending',
        realName: this.verifyForm.realName,
        idNumber: this.verifyForm.idNumber,
        submissionDate: submissionDate,
      }
      
      localStorage.setItem('verificationData', JSON.stringify(verificationData))
      
      // 更新状态
      this.verificationStatus = 'pending'
      this.submissionDate = this.formatDate(submissionDate)
      
      alert('认证申请已提交，请等待审核（模拟环境中可以手动修改localStorage中的状态为verified进行测试）')
      
      // 清空表单
      this.verifyForm = {
        realName: '',
        idNumber: '',
        idCardFront: '',
        idCardBack: '',
      }
    },

    // 浏览历史相关方法
    loadHistory() {
      const historyData = JSON.parse(localStorage.getItem('browseHistory'))
      if (historyData) {
        this.videoHistory = historyData.videoHistory || []
        this.articleHistory = historyData.articleHistory || []
      } else {
        // 初始化模拟数据
        this.videoHistory = [
          {
            id: 1,
            title: '【科技】最新AI技术解析与应用展示',
            author: '科技探索者',
            coverUrl: 'https://placehold.co/160x90/00a1d6/ffffff?text=视频1',
            duration: 620,
            views: 12580,
            watchTime: new Date().toISOString(),
          },
          {
            id: 2,
            title: '【美食】家常菜制作教程合集',
            author: '美食达人',
            coverUrl: 'https://placehold.co/160x90/FB7299/ffffff?text=视频2',
            duration: 1240,
            views: 34250,
            watchTime: new Date(Date.now() - 86400000).toISOString(),
          },
        ]
        this.articleHistory = [
          {
            id: 1,
            title: '深度解析：互联网发展趋势报告',
            author: '行业分析师',
            reads: 5680,
            readTime: new Date().toISOString(),
          },
          {
            id: 2,
            title: '健康生活指南：如何保持良好作息',
            author: '健康专家',
            reads: 8920,
            readTime: new Date(Date.now() - 172800000).toISOString(),
          },
        ]
      }
    },
    formatHistoryTime(dateString) {
      const date = new Date(dateString)
      const now = new Date()
      const diffMs = now - date
      const diffMins = Math.floor(diffMs / 60000)
      const diffHours = Math.floor(diffMs / 3600000)
      const diffDays = Math.floor(diffMs / 86400000)
      
      if (diffMins < 60) {
        return `${diffMins}分钟前`
      } else if (diffHours < 24) {
        return `${diffHours}小时前`
      } else if (diffDays < 7) {
        return `${diffDays}天前`
      } else {
        return this.formatDate(dateString)
      }
    },
    deleteHistoryItem(index, type = 'video') {
      if (type === 'video') {
        this.videoHistory.splice(index, 1)
      } else {
        this.articleHistory.splice(index, 1)
      }
      this.saveHistory()
    },
    clearHistory() {
      if (confirm('确定要清空所有浏览历史吗？此操作不可恢复。')) {
        if (this.historyTab === 'videos') {
          this.videoHistory = []
        } else {
          this.articleHistory = []
        }
        this.saveHistory()
      }
    },
    saveHistory() {
      const historyData = {
        videoHistory: this.videoHistory,
        articleHistory: this.articleHistory,
      }
      localStorage.setItem('browseHistory', JSON.stringify(historyData))
    },

    // 通知设置相关方法
    loadNotificationSettings() {
      const settings = JSON.parse(localStorage.getItem('notificationSettings'))
      if (settings) {
        this.notificationSettings = { ...this.notificationSettings, ...settings }
      }
    },
    saveNotificationSettings() {
      localStorage.setItem('notificationSettings', JSON.stringify(this.notificationSettings))
      alert('通知设置已保存！')
    },
    
    // 成就相关方法
    loadAchievements() {
      const currentUser = JSON.parse(localStorage.getItem('currentUser'))
      if (currentUser && currentUser.achievements) {
        this.achievements = currentUser.achievements
      } else {
        // 初始化模拟成就数据
        this.achievements = [
          {
            id: 1,
            name: '初次登录',
            description: '完成首次登录',
            icon: '🎯',
            points: 10,
            category: '社区',
            unlocked: true,
            unlockedDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(),
            progress: 1,
            maxProgress: 1,
          },
          {
            id: 2,
            name: '发布达人',
            description: '发布10个视频',
            icon: '📹',
            points: 50,
            category: '创作',
            unlocked: true,
            unlockedDate: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
            progress: 10,
            maxProgress: 10,
          },
          {
            id: 3,
            name: '点赞能手',
            description: '获得100个点赞',
            icon: '👍',
            points: 30,
            category: '互动',
            unlocked: true,
            unlockedDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
            progress: 100,
            maxProgress: 100,
          },
          {
            id: 4,
            name: '粉丝突破',
            description: '获得500个粉丝',
            icon: '👥',
            points: 100,
            category: '社区',
            unlocked: false,
            progress: 536,
            maxProgress: 500,
          },
          {
            id: 5,
            name: '连续登录',
            description: '连续登录7天',
            icon: '🔥',
            points: 20,
            category: '社区',
            unlocked: true,
            unlockedDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
            progress: 7,
            maxProgress: 7,
          },
          {
            id: 6,
            name: '视频新星',
            description: '视频播放量达到1000',
            icon: '⭐',
            points: 40,
            category: '创作',
            unlocked: false,
            progress: 850,
            maxProgress: 1000,
          },
          {
            id: 7,
            name: '活跃用户',
            description: '累计评论50次',
            icon: '💬',
            points: 35,
            category: '互动',
            unlocked: true,
            unlockedDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
            progress: 50,
            maxProgress: 50,
          },
          {
            id: 8,
            name: '节日庆典',
            description: '参与节日活动',
            icon: '🎉',
            points: 25,
            category: '活动',
            unlocked: true,
            unlockedDate: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
            progress: 1,
            maxProgress: 1,
          },
        ]
      }
      
      // 计算总成就数和总积分
      this.calculateAchievementStats()
      
      // 保存到localStorage
      if (currentUser) {
        currentUser.achievements = this.achievements
        localStorage.setItem('currentUser', JSON.stringify(currentUser))
      }
    },
    
    // 计算成就统计数据
    calculateAchievementStats() {
      const unlockedAchievements = this.achievements.filter(ach => ach.unlocked)
      this.totalAchievements = unlockedAchievements.length
      this.totalPoints = unlockedAchievements.reduce((sum, ach) => sum + ach.points, 0)
    },
    
    // 切换成就分类
    changeAchievementCategory(category) {
      this.activeAchievementCategory = category
    },
    
    // 获取筛选后的成就列表
    getFilteredAchievements() {
      if (this.activeAchievementCategory === '全部') {
        return this.achievements
      }
      return this.achievements.filter(ach => ach.category === this.activeAchievementCategory)
    },
    
    // 显示成就详情
    showAchievementModal(achievement) {
      this.selectedAchievement = achievement
      this.showAchievementDetails = true
    },
    
    // 关闭成就详情
    closeAchievementModal() {
      this.showAchievementDetails = false
      this.selectedAchievement = null
    },
  },
}
</script>

<style scoped>
/* 全局变量定义 */

/* 主题设置样式 */
.theme-settings {
  padding: 20px;
}

.theme-settings h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--text-color);
}

.theme-description {
  color: var(--text-secondary);
  margin-bottom: 30px;
  font-size: 14px;
}

.theme-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.theme-option-item {
  background-color: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.theme-option-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

.theme-option-item.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.2);
}

.theme-preview {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-preview-header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.theme-preview-title {
  width: 100px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.theme-preview-buttons {
  display: flex;
  gap: 6px;
}

.theme-preview-button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
}

.theme-preview-content {
  height: 140px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.theme-preview-text {
  font-size: 24px;
  font-weight: bold;
}

.theme-preview-card {
  flex: 1;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-preview-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.theme-info {
  text-align: center;
}

.theme-name {
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.theme-description {
  font-size: 12px;
  color: var(--text-secondary);
}

.theme-checkmark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background-color: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.theme-tips {
  background-color: var(--hover-color);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

/* 活动时间线相关样式 */
.activity-settings {
  padding: 20px;
  background-color: var(--card-bg);
  border-radius: 12px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.activity-header h3 {
  font-size: 24px;
  margin: 0;
  color: var(--text-primary);
}

.mark-all-read-btn {
  padding: 8px 16px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.mark-all-read-btn:hover:not(:disabled) {
  background-color: var(--primary-hover);
}

.mark-all-read-btn:disabled {
  background-color: var(--disabled-bg);
  cursor: not-allowed;
}

.activity-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.filter-btn {
  padding: 6px 12px;
  background-color: var(--bg-color);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.filter-btn.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background-color: var(--bg-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.activity-item:hover {
  background-color: var(--hover-color);
  transform: translateX(2px);
}

.activity-item.unread {
  border-left-color: var(--primary-color);
  background-color: rgba(var(--primary-rgb), 0.05);
}

.activity-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--card-bg);
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.activity-description {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.activity-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

.activity-indicator {
  flex-shrink: 0;
}

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

.empty-timeline {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    background-color: var(--bg-color);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
  }

/* 响应式设计 */
@media (max-width: 768px) {
  .theme-options-grid {
    grid-template-columns: 1fr;
  }
  
  .theme-preview {
    height: 150px;
  }
}

/* CSS变量应该在全局样式文件中定义 */

/* 个人主页容器样式 */
.profile-page {
  background-color: white;
  min-height: 100vh;
}

/* 用户信息卡片样式 - 现代化渐变背景 */
.user-card {
  background: linear-gradient(135deg, #1a5276 0%, #3498db 100%);
  color: #333333;
  padding: 36px 0;
  margin-bottom: 24px;
  box-shadow: var(--shadow-medium);
  position: relative;
  overflow: hidden;
}

/* 添加动态装饰元素 */
.user-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: float 10s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(10px, -10px) rotate(5deg); }
  66% { transform: translate(-10px, 10px) rotate(-5deg); }
}

.user-card-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 32px;
  position: relative;
  z-index: 1;
}

.user-avatar-large {
  position: relative;
  flex-shrink: 0;
  animation: pulseAvatar 3s ease-in-out infinite;
}

@keyframes pulseAvatar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.avatar-img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
  transition: var(--transition-base);
}

.avatar-img:hover {
  transform: scale(1.05);
}

.vip-badge {
  position: absolute;
  bottom: 0;
  right: -5px;
  background: linear-gradient(45deg, #ffb800, #ff7a45);
  padding: 6px 14px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.2);
  animation: glowBadge 2s ease-in-out infinite alternate;
}

@keyframes glowBadge {
  from { box-shadow: 0 3px 10px rgba(255, 255, 255, 0.2); }
  to { box-shadow: 0 3px 15px rgba(255, 184, 0, 0.4); }
}

.user-info-main {
  flex: 1;
}

.user-basic-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.user-nickname {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: #333333;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
}

.user-username {
  font-size: 15px;
  opacity: 0.85;
}

.user-level {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(2px);
}

.user-signature {
  font-size: 15px;
  opacity: 0.85;
  margin: 12px 0 20px;
  line-height: 1.5;
  max-width: 600px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* 统计数据区域 - 更现代的设计 */
.user-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 8px 12px;
  backdrop-filter: blur(10px);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  border-radius: 20px;
  transition: var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.stat-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.8));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 13px;
  opacity: 0.9;
}

/* 替换直线分隔符为点状分隔符 */
.stat-item:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.stat-divider {
  display: none;
}

/* 个人中心主体容器 - 添加水平滚动支持 */
.user-center-container {
  display: flex;
  min-height: 100vh;
  background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-light) white;
  scroll-behavior: smooth;
}

/* 美化滚动条 */
.user-center-container::-webkit-scrollbar {
  height: 8px;
}

.user-center-container::-webkit-scrollbar-track {
  background: var(--background-secondary);
  border-radius: 4px;
}

.user-center-container::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 4px;
  transition: background 0.3s;
}

.user-center-container::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* 左侧侧边栏 - 现代化设计 */
.sidebar {
  width: 240px;
  background-color: white;
  border-right: 1px solid #e1f5fe;
  height: calc(100vh - 220px); /* 减去顶部用户卡片的高度和额外空间 */
  position: sticky;
  left: 0;
  top: 200px;
  overflow-y: auto;
  z-index: 10;
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
  box-shadow: var(--shadow-light);
  transition: var(--transition-base);
  flex-shrink: 0;
}

.sidebar:hover {
  box-shadow: var(--shadow-medium);
}

.sidebar-header {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border-light);
}

.sidebar-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.5px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  margin: 0;
  position: relative;
}

.menu-link {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  color: #34495e;
  text-decoration: none;
  transition: var(--transition-base);
  font-size: 15px;
  position: relative;
  overflow: hidden;
  border-left: 3px solid transparent;
}

/* 现代侧边栏选中效果 */
.menu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary-color), var(--primary-dark));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-link:hover {
  background-color: rgba(52, 152, 219, 0.1);
  color: #2980b9;
  border-left-color: #3498db;
  padding-left: 28px;
}

.menu-link:hover::before {
  transform: scaleY(0.8);
}

.menu-item.active .menu-link {
  background: linear-gradient(90deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0));
  color: #2980b9;
  font-weight: 600;
  border-left-color: #3498db;
}

.menu-item.active .menu-link::before {
  transform: scaleY(1);
}

.menu-icon {
  font-size: 19px;
  margin-right: 14px;
  width: 22px;
  text-align: center;
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-link:hover .menu-icon {
  transform: scale(1.2) rotate(5deg);
}

/* 添加菜单项右侧指示器 */
.menu-item.active .menu-icon::after {
  content: '✓';
  position: absolute;
  font-size: 10px;
  color: var(--primary-color);
  animation: popIn 0.3s ease;
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* 右侧内容区 - 优化间距和布局 */
.content-area {
  flex: 1;
  margin-left: 20px;
  padding: 32px;
  min-height: calc(100vh - 120px); /* 减去顶部用户卡片的高度 */
  min-width: 700px;
  flex-shrink: 0;
  margin-right: 20px;
}

/* 内容头部导航 - 现代化标签页设计 */
.content-header {
  background-color: #ffffff;
  border-radius: var(--border-radius-large);
  margin-bottom: 28px;
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  transition: var(--transition-base);
}

.content-header:hover {
  box-shadow: var(--shadow-large);
}

.tab-nav {
  display: flex;
  padding: 0 32px;
  border-bottom: 1px solid #e1f5fe;
  background: white;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-light) var(--background-primary);
}

/* 标签页导航滚动条美化 */
.tab-nav::-webkit-scrollbar {
  height: 4px;
}

.tab-nav::-webkit-scrollbar-track {
  background: var(--background-primary);
}

.tab-nav::-webkit-scrollbar-thumb {
  background: var(--primary-light);
  border-radius: 2px;
  transition: background 0.3s;
}

.tab-nav::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

.tab-item {
  padding: 20px 32px;
  font-size: 16px;
  color: #34495e;
  cursor: pointer;
  position: relative;
  transition: var(--transition-base);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: auto;
}

.tab-item:hover {
  color: var(--primary-color);
  background-color: #f8f9fa;
  transform: translateY(-1px);
}

.tab-item.active {
  color: #2980b9;
  font-weight: 600;
  background-color: rgba(52, 152, 219, 0.1);
}

/* 现代标签页指示器 */
.tab-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border-radius: 3px 3px 0 0;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { 
    left: 50%; 
    right: 50%;
    opacity: 0;
  }
  to { 
    left: 0;
    right: 0;
    opacity: 1;
  }
}

/* 表单容器 - 现代化设计 */
.form-container {
  background-color: white;
  border-radius: var(--border-radius-large);
  padding: 36px;
  box-shadow: var(--shadow-medium);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
  border: 1px solid #e1f5fe;
}

/* 容器顶部装饰条 */
.form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
}

.form-container:hover {
  box-shadow: var(--shadow-large);
  transform: translateY(-2px);
}

.form-section {
  margin-bottom: 40px;
}

.form-row {
  margin-bottom: 32px;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.form-label {
  width: 150px;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #2c3e50;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* 现代化输入框设计 */
.form-input {
  flex: 1;
  padding: 12px 18px;
  font-size: 15px;
  border: 2px solid #d1ecf1;
  border-radius: var(--border-radius-medium);
  transition: var(--transition-base);
  background-color: white;
  color: #2c3e50;
  position: relative;
  z-index: 1;
}

.form-input::placeholder {
  color: var(--text-placeholder);
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
}

.form-input.readonly {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
  border-color: var(--border-light);
}

/* 文本域样式优化 */
.form-textarea {
  flex: 1;
  padding: 12px 18px;
  font-size: 15px;
  border: 2px solid #d1ecf1;
  border-radius: var(--border-radius-medium);
  resize: vertical;
  min-height: 120px;
  transition: var(--transition-base);
  background-color: white;
  color: #2c3e50;
  font-family: inherit;
}

.form-textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
}

.form-hint {
  margin-left: 18px;
  padding: 12px 0;
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* 增强输入框焦点时的动画效果 */
.form-input:focus,
.form-textarea:focus {
  transform: translateY(-1px);
  animation: focusPulse 0.5s ease;
}

@keyframes focusPulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.2); }
  50% { box-shadow: 0 0 0 6px rgba(52, 152, 219, 0.3); }
  100% { box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2); }
}

/* 性别选择 - 自定义样式 */
.gender-options {
  display: flex;
  align-items: center;
  padding: 8px 0;
  gap: 32px;
}

.gender-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: var(--transition-fast);
}

/* 自定义单选按钮 */
.gender-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自定义单选按钮外观 */
.gender-option::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  margin-right: 10px;
  transition: var(--transition-base);
  position: relative;
}

.gender-option:hover::before {
  border-color: var(--primary-light);
  transform: scale(1.1);
}

.gender-option input[type="radio"]:checked + .gender-text + .gender-option::before,
.gender-option.selected::before {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
}

.gender-option input[type="radio"]:checked + .gender-text + .gender-option::before::after,
.gender-option.selected::before::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  animation: radioCheck 0.2s ease;
}

@keyframes radioCheck {
  0% { transform: translate(-50%, -50%) scale(0); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.gender-text {
  font-size: 15px;
  color: var(--text-primary);
  transition: var(--transition-fast);
  font-weight: 500;
}

.gender-option:hover .gender-text,
.gender-option.selected .gender-text {
  color: var(--primary-color);
}

/* 学校信息提示 */
.school-info {
  padding: 10px 0;
}

.school-hint {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  padding: 8px 16px;
  background-color: rgba(0, 161, 214, 0.05);
  border-radius: var(--border-radius-small);
  border-left: 3px solid var(--primary-light);
}

/* 头像上传区域样式 - 增强视觉效果 */
.avatar-row {
  align-items: flex-start;
}

.avatar-upload-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.avatar-preview {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition-base);
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(26, 82, 118, 0.1);
}

.avatar-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(26, 82, 118, 0.2);
  border-color: var(--primary-light);
  animation: avatarHover 0.6s ease infinite alternate;
}

@keyframes avatarHover {
  from { transform: translateY(0) scale(1.05); }
  to { transform: translateY(-5px) scale(1.05); }
}

.current-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

.avatar-preview:hover .current-avatar {
  transform: scale(1.15) rotate(3deg);
}

.avatar-upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333333;
  opacity: 0;
  transition: var(--transition-slow);
  backdrop-filter: blur(4px);
  border-radius: 50%;
}

.avatar-preview:hover .avatar-upload-overlay {
  opacity: 1;
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
  transform: scale(0.8);
  transition: transform 0.4s ease;
}

.avatar-preview:hover .upload-icon {
  transform: scale(1.2) rotate(15deg);
}

.upload-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.avatar-hint {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  padding: 8px 16px;
  background-color: rgba(0, 161, 214, 0.05);
  border-radius: var(--border-radius-medium);
  border-left: 3px solid var(--primary-light);
}

/* 头像预览模态框样式 */
.avatar-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.avatar-modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 450px;
  max-height: 80vh;
  overflow: hidden;
}

.avatar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.avatar-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.avatar-modal-close:hover {
  background-color: #f0f0f0;
  color: #666;
}

.avatar-modal-body {
  padding: 30px 24px;
  text-align: center;
}

.avatar-crop-container {
  width: 200px;
  height: 200px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-crop-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-crop-hint {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.avatar-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}

/* 历史头像按钮样式 */
.history-avatar-btn {
  margin-top: 4px;
  padding: 8px 20px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.25);
}

.history-avatar-btn:hover {
  background-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.history-avatar-btn:active {
  transform: translateY(0);
}

/* 头像历史记录模态框样式 */
.avatar-history-modal-content {
  width: 90%;
  max-width: 600px;
}

.avatar-history-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 15px;
  padding: 10px 0;
}

.avatar-history-item {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.avatar-history-item:hover {
  border-color: #00a1d6;
  transform: scale(1.05);
}

.history-avatar-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}

.avatar-select-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 161, 214, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.avatar-history-hint {
  color: #999;
  font-size: 12px;
  margin-top: 15px;
  text-align: center;
}

.avatar-modal-cancel,
.avatar-modal-save {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-modal-cancel {
  background-color: white;
  color: #666;
  border: 1px solid #dcdfe6;
}

.avatar-modal-cancel:hover {
  border-color: #c0c4cc;
  color: #409eff;
}

.avatar-modal-save {
  background-color: #00a1d6;
  color: white;
  border: none;
}

.avatar-modal-save:hover {
  background-color: #0086b3;
}

/* 表单操作按钮 - 现代化按钮设计 */
.form-actions {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.save-button {
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5);
  color: black;
  border: none;
  padding: 14px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  transition: var(--transition-base);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  opacity: 1;
  text-shadow: none;
}

/* 按钮悬停效果 */
.save-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(0, 161, 214, 0.45);
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}

/* 按钮点击效果 */
.save-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 161, 214, 0.3);
}

/* 按钮发光效果 */
.save-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
  z-index: -10;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(45deg); opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { transform: translateX(100%) rotate(45deg); opacity: 0.3; }
}

/* 辅助按钮样式 */
.secondary-button {
  background-color: var(--background-primary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  padding: 14px 36px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--border-radius-medium);
  cursor: pointer;
  transition: var(--transition-base);
  letter-spacing: 0.5px;
}

.secondary-button:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 161, 214, 0.15);
}

.secondary-button:active {
  transform: translateY(0);
}

/* 标签页内容样式 */
.tab-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 20px;
}

.tab-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

/* 头像管理样式 */
.avatar-management {
  text-align: center;
}

.avatar-display {
  margin-bottom: 24px;
}

.large-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0f0f0;
}

.avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.avatar-upload-btn,
.avatar-history-btn {
  padding: 8px 24px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-upload-btn:hover,
.avatar-history-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

.avatar-rules {
  text-align: left;
  background-color: #ffffff;
  padding: 16px;
  border-radius: 4px;
}

.avatar-rules p {
  margin: 8px 0;
  font-size: 14px;
  color: #666;
}

/* 勋章样式 */
.badges-list,
.achievements-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.badge-item,
.achievement-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s;
}

.badge-item:hover,
.achievement-item:hover {
  background-color: #e9ecef;
}

.badge-icon,
.achievement-icon {
  font-size: 32px;
  margin-right: 16px;
}

.badge-info,
.achievement-info {
  flex: 1;
}

.badge-name,
.achievement-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.badge-level {
  color: #409eff;
  font-size: 14px;
  margin-bottom: 4px;
}

.badge-desc,
.achievement-date {
  color: #666;
  font-size: 14px;
}

/* 安全管理样式 */
.security-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.security-item:last-child {
  border-bottom: none;
}

.security-label {
  font-weight: 500;
}

.security-status {
  color: #67c23a;
}

.security-btn {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.security-btn:hover {
  border-color: #409eff;
  color: #409eff;
}

/* 隐私设置样式 - 现代化设计 */
.privacy-management {
  background-color: #ffffff;
  border-radius: var(--border-radius-large);
  padding: 36px;
  box-shadow: var(--shadow-medium);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

/* 容器顶部装饰条 */
.privacy-management::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
}

.privacy-management:hover {
  box-shadow: var(--shadow-large);
  transform: translateY(-2px);
}

.privacy-management h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.privacy-management h3::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
  border-radius: 3px;
}

.privacy-section {
  margin-bottom: 40px;
  position: relative;
}

.privacy-section:last-child {
  margin-bottom: 24px;
}

.privacy-section h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 24px;
  padding-left: 12px;
  border-left: 3px solid var(--primary-color);
}

.privacy-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 12px;
  background-color: #ffffff;
  border-radius: var(--border-radius-medium);
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.privacy-item:hover {
  background-color: #f8f9fa;
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.privacy-item:last-child {
  margin-bottom: 0;
}

.privacy-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.privacy-control {
  display: flex;
  align-items: center;
}

/* 现代化下拉选择框样式 */
.privacy-select {
  padding: 10px 16px;
  font-size: 15px;
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius-medium);
  background-color: #ffffff;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-base);
  min-width: 180px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23999'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.privacy-select:hover {
  border-color: var(--primary-light);
}

.privacy-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 161, 214, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300a1d6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

/* 自定义开关样式 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: var(--transition-base);
  border-radius: 34px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: var(--transition-base);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 161, 214, 0.3);
}

input:checked + .toggle-slider:before {
  transform: translateX(30px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  animation: togglePulse 0.3s ease;
}

@keyframes togglePulse {
  0% { transform: translateX(30px) scale(1); }
  50% { transform: translateX(30px) scale(1.15); }
  100% { transform: translateX(30px) scale(1); }
}

/* 基础内容样式 */
.basic-content {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.back-link {
  display: inline-block;
  margin-top: 20px;
  color: #409eff;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .user-center-container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  .content-area {
    margin-left: 0;
    padding: 16px;
  }
  
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-label {
    width: 100%;
    margin-bottom: 8px;
  }
  
  .form-hint {
    margin-left: 0;
    margin-top: 4px;
  }
  
  .gender-options {
    flex-wrap: wrap;
  }
  
  .gender-option {
    margin-bottom: 8px;
  }
}

/* 成就功能样式 */
.achievement-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.stat-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #3a86ff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.achievement-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.category-btn {
  background: #f0f0f0;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.category-btn:hover {
  background: #e0e0e0;
}

.category-btn.active {
  background: #3a86ff;
  color: white;
}

.achievements-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.achievement-item {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.3s;
  opacity: 0.7;
  position: relative;
}

.achievement-item.unlocked {
  background: white;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.achievement-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.achievement-icon {
  font-size: 32px;
  margin-right: 15px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 50%;
  flex-shrink: 0;
}

.achievement-item.unlocked .achievement-icon {
  background: linear-gradient(135deg, #3a86ff, #8338ec);
  color: white;
}

.achievement-info {
  flex: 1;
  min-width: 0;
}

.achievement-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}

.achievement-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.4;
}

.achievement-progress {
  margin-bottom: 10px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3a86ff, #8338ec);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: #888;
  text-align: right;
}

.achievement-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.achievement-points {
  background: #3a86ff;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: bold;
}

.achievement-date {
  color: #888;
}

.achievement-status {
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.unlocked-badge {
  color: #4caf50;
  font-size: 20px;
}

.locked-badge {
  color: #999;
  font-size: 20px;
}

/* 成就详情模态框样式 */
.achievement-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.achievement-modal-content {
  background: white;
  border-radius: 12px;
  padding: 0;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.achievement-modal-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.achievement-modal-header h3 {
  margin: 0;
  color: #333;
}

.achievement-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
}

.achievement-modal-close:hover {
  background: #f0f0f0;
  color: #333;
}

.achievement-modal-body {
  padding: 20px;
  text-align: center;
}

.achievement-detail-icon {
  font-size: 64px;
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #3a86ff, #8338ec);
  border-radius: 50%;
  color: white;
}

.achievement-detail-name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.achievement-detail-description {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}

.achievement-detail-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: #888;
}

.detail-value {
  font-weight: bold;
  color: #333;
}

.achievement-detail-progress {
  margin-bottom: 20px;
}

.achievement-modal-footer {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  text-align: center;
}

.achievement-modal-close-btn {
  background: #3a86ff;
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.achievement-modal-close-btn:hover {
  background: #2c6be5;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .achievement-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .achievements-list {
    grid-template-columns: 1fr;
  }
}

/* 社交互动相关样式 */
.follow-btn {
  background: #3a86ff;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 15px;
}

.follow-btn:hover {
  background: #2c6be5;
  transform: translateY(-1px);
}

.follow-btn.following {
  background: #f0f0f0;
  color: #666;
}

.follow-btn.following:hover {
  background: #ff4d4f;
  color: white;
}

.user-stats .stat-item {
  cursor: pointer;
  transition: color 0.3s;
}

.user-stats .stat-item:hover .stat-value,
.user-stats .stat-item:hover .stat-label {
  color: #3a86ff;
}

/* 社交列表模态框样式 */
.social-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.social-modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease;
}

.social-modal-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.social-modal-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.social-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s;
}

.social-modal-close:hover {
  background: #f0f0f0;
  color: #333;
}

.social-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.user-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.user-list-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: background 0.3s;
}

.user-list-item:hover {
  background: #e9ecef;
}

.user-list-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-list-info {
  flex: 1;
}

.user-list-nickname {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.user-follow-btn {
  background: #3a86ff;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
}

.user-follow-btn:hover {
  background: #2c6be5;
}

.user-follow-btn.following {
  background: #f0f0f0;
  color: #666;
}

.user-follow-btn.following:hover {
  background: #ff4d4f;
  color: white;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.social-modal-footer {
  padding: 15px 20px;
  border-top: 1px solid #e0e0e0;
  text-align: right;
}

.social-modal-close-btn {
  background: #f0f0f0;
  color: #333;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.social-modal-close-btn:hover {
  background: #e0e0e0;
}

/* 响应式社交样式 */
@media (max-width: 768px) {
  .follow-btn {
    margin-left: 10px;
    padding: 6px 16px;
    font-size: 13px;
  }
  
  .social-modal-content {
    width: 95%;
    max-height: 90vh;
  }
  
  .user-list-avatar {
    width: 40px;
    height: 40px;
  }
  
  .user-follow-btn {
    padding: 5px 12px;
    font-size: 12px;
  }
  
  /* 活动时间线响应式设计 */
  @media (max-width: 768px) {
    .activity-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    
    .mark-all-read-btn {
      align-self: stretch;
    }
    
    .activity-filter {
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-btn {
      padding: 6px 12px;
      font-size: 12px;
    }
    
    .activity-list {
      border-radius: 0;
    }
    
    .activity-item {
      padding: 12px;
    }
    
    .activity-content {
      font-size: 13px;
    }
  }
  
  @media (max-width: 480px) {
    .activity-item {
      padding: 10px;
    }
    
    .activity-content {
      font-size: 12px;
    }
    
    .empty-timeline {
      padding: 20px 10px;
      font-size: 12px;
    }
  }
}
</style>